<template>
  <div class="centextBar" id="project_details">
    <div class="title">
      <div class="title">查看项目</div>
      <!-- 右侧编辑项目按钮 -->
      <div class="buttonBar float-right">
        <button  id = "modifyBtn"  type="button" class="btn" style="margin-right:40px;color:#5bc590;background-color:#fff;border-color:#5bc590; ">
          编辑项目
        </button>
      </div>

      <div class="clear"></div>
    </div>
    <div class="tableBox" style="overflow:scroll;overflow-y:hidden;overflow-x:hidden;height: 100% ">
      <table class="table details	" style = "border-collapse: separate;">
        <tbody>
        <tr>
          <td style="background-color: rgba(255, 255, 255, 1);text-align:left;padding: 0px;vertical-align: middle;" class="vl"> 项目名称&nbsp;:</td>
          <td style="background-color: rgba(255, 255, 255, 1);text-align:left;padding: 0px;margin-left: -8%;" class="text-grey">{{projectName}}</td>
        </tr>
        <tr>
          <td style="text-align:left;padding: 0px;vertical-align: middle;" class="vl">项目编号&nbsp;:</td>
          <td style="text-align:left;padding: 0px;margin-left: -8%;" class="text-grey">{{projectNumber}}</td>
        </tr>
        <tr>
          <td style="background-color: rgba(255, 255, 255, 1);text-align:left;padding: 0px;vertical-align: middle;" class="vl">所属公司&nbsp;:</td>
          <td style="background-color: rgba(255, 255, 255, 1);text-align:left;padding: 0px;margin-left: -8%;" class="text-grey">{{company}}</td>
        </tr>
        <tr>
          <td style="text-align:left;padding: 0px;vertical-align: middle;" class="vl">负责人&nbsp;:</td>
          <td style="text-align:left;padding: 0px;margin-left: -8%;" class="text-grey">{{displayName}}</td>
        </tr>
        <tr>
          <td style="background-color: rgba(255, 255, 255, 1);text-align:left;padding: 0px;vertical-align: middle;" class="vl">项目状态 &nbsp; :</td>
          <td style="background-color: rgba(255, 255, 255, 1);text-align:left;padding: 0px;margin-left: -8%;color: #ed3a3a;" class="text-grey" v-show="status === 'UNAPPROVED'">已暂停</td>
          <td style="background-color: rgba(255, 255, 255, 1);text-align:left;padding: 0px;margin-left: -8%;color: #28b855;" class="text-grey" v-show="status === 'APPROVED'">已发布</td>
          <td style="background-color: rgba(255, 255, 255, 1);text-align:left;padding: 0px;margin-left: -8%;color: #909090;" class="text-grey" v-show="status === 'DEFRIEND'">待发布</td>
        </tr>
        </tbody>
      </table>
      <div class="loading">正在加载...</div>
      <div class="title">
        <div class="clear"></div>
      </div>
      <!-- 绑定线路 -->
      <div class="title">
        <div class="title">绑定线路</div>
        <!-- 右侧绑定线路按钮 -->
        <div class="buttonBar float-right">
          <button id = "trussBtn" type="button"  class="btn" style="margin-right:40px;color:#5bc590;background-color:#fff;border-color:#5bc590; ">
            绑定线路
          </button>
        </div>
        <div class="clear"></div>
      </div>
      <!-- 绑定线路表格-->
      <div  id= "projectDetailsScDiv" class="tableBox"  style="height:250px;overflow:scroll;overflow-y:hidden;overflow-x:hidden">
        <table class="table table-striped" >
          <thead>
          <tr>
            <th>序号</th>
            <th>线路名称</th>
            <th>线路代号</th>
            <th>线路类型</th>
            <th id = "operateTh">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="line in projectLineList">
            <td>1</td>
            <td v-show="line.lineName">{{line.lineName}}</td>
            <td v-show="line.lineCode">{{line.lineCode}}</td>
            <td v-show="line.lineTypeName">{{line.lineTypeName}}</td>
            <td><a style="color:#ed3a3a" href="javascript:void(0)">解除绑定</a></td>
          </tr>
          </tbody>
        </table>
        <div class="loading">正在加载...</div>
      </div>
    </div>
    <!-- 右侧取消按钮 -->
    <div class="buttonBar float-right">
      <button type="button" class="btn" style="margin-right:40px;color:#5bc590;background-color:#fff;border-color:#5bc590; " @click="cancel">
        &nbsp;&nbsp;返回&nbsp;&nbsp;
      </button>
    </div>
  </div>
</template>

<script>
    export default {
        name: "project_details",
      data() {
        return {
          projectLineList: [{
            lineName:'admin',
            lineCode:'超级管理员',
            lineTypeName:'123455678901',
          }],
          projectName:'第一个项目',
          projectNumber:'001',
          company:'沈阳这行',
          displayName:'杨思琦',
          status :'DEFRIEND'
        }
      },
    methods:{
      cancel(){
        var self = this
        self.$router.push({
          path: '/project'
        })
      },
    }
    }
</script>

<style scoped>
  .save{
    line-height:28px;
    height:28px;
    width:70px;
    color:#ffffff;
    background-color:#53cc70;
    font-size:16px;
    font-weight:normal;
    font-family:Arial;
    border:1px solid #dcdcdc;
    -webkit-border-top-left-radius:10px;
    -moz-border-radius-topleft:10px;
    border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    -moz-border-radius-topright:10px;
    border-top-right-radius:10px;
    -webkit-border-bottom-left-radius:10px;
    -moz-border-radius-bottomleft:10px;
    border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    -moz-border-radius-bottomright:10px;
    border-bottom-right-radius:10px;
    -moz-box-shadow: inset 0px 0px 0px 0px #ffffff;
    -webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;
    box-shadow: inset 0px 0px 0px 0px #ffffff;
    text-align:center;
    display:inline-block;
    text-decoration:none;
  }
  .save:hover{
    background-color:#39b858;
  }


  .cancel{
    line-height:28px;
    height:28px;
    width:70px;
    color:#777777;
    background-color:#ededed;
    font-size:16px;
    font-weight:normal;
    font-family:Arial;
    background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #ededed), color-stop(1, #f5f5f5));
    background:-moz-linear-gradient(top, #ededed 5%, #f5f5f5 100%);
    background:-o-linear-gradient(top, #ededed 5%, #f5f5f5 100%);
    background:-ms-linear-gradient(top, #ededed 5%, #f5f5f5 100%);
    background:linear-gradient(to bottom, #ededed 5%, #f5f5f5 100%);
    background:-webkit-linear-gradient(top, #ededed 5%, #f5f5f5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#f5f5f5',GradientType=0);
    border:1px solid #34cc32;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -moz-box-shadow: inset 0px 0px 0px 0px #ffffff;
    -webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;
    box-shadow: inset 0px 0px 0px 0px #ffffff;
    text-align:center;
    display:inline-block;
    text-decoration:none;
  }
  .cancel:hover{
    background-color:#f5f5f5;
    background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #f5f5f5), color-stop(1, #ededed));
    background:-moz-linear-gradient(top, #f5f5f5 5%, #ededed 100%);
    background:-o-linear-gradient(top, #f5f5f5 5%, #ededed 100%);
    background:-ms-linear-gradient(top, #f5f5f5 5%, #ededed 100%);
    background:linear-gradient(to bottom, #f5f5f5 5%, #ededed 100%);
    background:-webkit-linear-gradient(top, #f5f5f5 5%, #ededed 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#ededed',GradientType=0);
  }
  .tableBox tr:nth-child(odd) td {
    background: none;
  }
  .colors{
    color: #888;
  }

  .vl{
    color: #666666;
    font-size: 16px;
    width: 5%;
  }
  .table {
    width: 100%;
    margin-left: 20px;
    max-width: 100%;
     margin-bottom: 20px;
  }
  .centextBar {
    position: absolute;
    float: right;
/*    width: 93.1%!important;*/
    min-width: 500px;
    left: 150px;
    /* height: 94%; */
    min-height: 1024px;
    padding: 15px;
    margin: 0;
    margin-top: 0;
    /*     margin: 0.5%;  */
    /*     margin-top: 3%; */
  }
</style>
